CSS ಸ್ಕ್ರೋಲ್-ಮಾರ್ಜಿನ್ ಕುರಿತ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ, ಇದು ಸ್ಥಿರ ಹೆಡರ್‌ಗಳೊಂದಿಗೆ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಆಫ್‌ಸೆಟ್ ಮಾಡುವ ಮೂಲಕ ಸುಗಮ ನ್ಯಾವಿಗೇಷನ್ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಪ್ರಾಯೋಗಿಕ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
CSS ಸ್ಕ್ರೋಲ್ ಮಾರ್ಜಿನ್: ಸ್ಥಿರ ಹೆಡರ್‌ಗಳಿಗಾಗಿ ಆಫ್‌ಸೆಟ್ ಆಂಕರಿಂಗ್‌ನಲ್ಲಿ ಪರಿಣತಿ
ಸ್ಥಿರ ಹೆಡರ್‌ಗಳಿರುವ ಉದ್ದನೆಯ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು ಸಾಮಾನ್ಯವಾಗಿ ನಿರಾಶಾದಾಯಕ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ಬಳಕೆದಾರರು ಆಂಕರ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ ಗುರಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಜಿಗಿಯುತ್ತದೆ, ಆದರೆ ಸ್ಥಿರ ಹೆಡರ್ ಆ ಎಲಿಮೆಂಟ್‌ನ ಮೇಲಿನ ಭಾಗವನ್ನು ಮರೆಮಾಡುತ್ತದೆ. ಇಲ್ಲಿಯೇ CSS scroll-margin ಮತ್ತು scroll-padding ಸಹಾಯಕ್ಕೆ ಬರುತ್ತವೆ, ಇದು ಆಂಕರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಮತ್ತು ಸುಗಮ ನ್ಯಾವಿಗೇಷನ್ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸರಳವಾದ ಆದರೆ ಶಕ್ತಿಯುತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಸ್ಥಿರ ಹೆಡರ್‌ನ ಅಡಚಣೆ
ಆಧುನಿಕ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರ ಹೆಡರ್‌ಗಳು ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ಅಂಶವಾಗಿದ್ದು, ನಿರಂತರ ನ್ಯಾವಿಗೇಷನ್ ಒದಗಿಸುವ ಮೂಲಕ ಉಪಯುಕ್ತತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಅವು ಒಂದು ಸಮಸ್ಯೆಯನ್ನು ತರುತ್ತವೆ: ಬಳಕೆದಾರರು ಪುಟದ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಕ್ಕೆ ಸೂಚಿಸುವ ಆಂತರಿಕ ಲಿಂಕ್ (ಆಂಕರ್ ಲಿಂಕ್) ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ ಗುರಿ ಎಲಿಮೆಂಟ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತದೆ. ಸ್ಥಿರ ಹೆಡರ್ ಇದ್ದರೆ, ಅದು ಗುರಿ ಎಲಿಮೆಂಟ್‌ನ ಮೇಲಿನ ಭಾಗವನ್ನು ಮುಚ್ಚುತ್ತದೆ, ಇದರಿಂದ ಬಳಕೆದಾರರು ತಾವು ನೋಡಲು ಬಯಸಿದ ವಿಷಯವನ್ನು ತಕ್ಷಣವೇ ನೋಡುವುದು ಕಷ್ಟವಾಗುತ್ತದೆ. ಇದು ಚಿಕ್ಕ ಪರದೆಯುಳ್ಳ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ವಿಶೇಷವಾಗಿ ಸಮಸ್ಯಾತ್ಮಕವಾಗಿರುತ್ತದೆ. ಟೋಕಿಯೊದಲ್ಲಿರುವ ಒಬ್ಬ ಬಳಕೆದಾರರು ತಮ್ಮ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ನಲ್ಲಿ ದೀರ್ಘವಾದ ಸುದ್ದಿ ಲೇಖನವನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತಿದ್ದಾರೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ; ಅವರು ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಕ್ಕೆ ಆಂಕರ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ, ಆದರೆ ಆ ವಿಭಾಗವು ಹೆಡರ್‌ನಿಂದ ಭಾಗಶಃ ಮರೆಯಾಗಿರುತ್ತದೆ. ಈ ಅಡಚಣೆಯು ಒಟ್ಟಾರೆ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
scroll-margin ಮತ್ತು scroll-padding ಪರಿಚಯ
CSS ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಸಹಾಯ ಮಾಡುವ ಎರಡು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೀಡುತ್ತದೆ: scroll-margin ಮತ್ತು scroll-padding. ಇವುಗಳು ಒಂದೇ ರೀತಿ ಕಂಡರೂ, ಅವು ವಿಭಿನ್ನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯ ವಿಭಿನ್ನ ಅಂಶಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತವೆ.
scroll-margin: ಈ ಪ್ರಾಪರ್ಟಿಯು ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವಾಗ ಎಲಿಮೆಂಟ್ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ನಡುವಿನ ಕನಿಷ್ಠ ಅಂತರವನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಆಂಕರ್ ಲಿಂಕ್ ಮೂಲಕ ವೀಕ್ಷಣೆಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಗುರಿ ಎಲಿಮೆಂಟ್‌ನ ಸುತ್ತಲೂ ಹೆಚ್ಚುವರಿ ಜಾಗವನ್ನು ಸೇರಿಸುವುದು ಎಂದು ಭಾವಿಸಬಹುದು. ಇದನ್ನು ಗುರಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.scroll-padding: ಈ ಪ್ರಾಪರ್ಟಿಯು ಸ್ಕ್ರೋಲ್‌ಪೋರ್ಟ್‌ನ (ಸ್ಕ್ರೋಲಿಂಗ್ ಕಂಟೇನರ್, ಸಾಮಾನ್ಯವಾಗಿ<body>ಎಲಿಮೆಂಟ್ ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ div) ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಮೂಲಭೂತವಾಗಿ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶದ ಮೇಲ್ಭಾಗ, ಬಲ, ಕೆಳಭಾಗ ಮತ್ತು ಎಡ ಅಂಚುಗಳಿಗೆ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದನ್ನು ಸ್ಕ್ರೋಲಿಂಗ್ ಕಂಟೇನರ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
ಸ್ಥಿರ ಹೆಡರ್‌ಗಳ ಸಂದರ್ಭದಲ್ಲಿ, scroll-margin-top ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಪ್ರಸ್ತುತವಾದ ಪ್ರಾಪರ್ಟಿಯಾಗಿದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಲೇಔಟ್‌ಗೆ ಅನುಗುಣವಾಗಿ, ನೀವು ಇತರ ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಸಹ ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು.
ಸ್ಥಿರ ಹೆಡರ್ ಆಫ್‌ಸೆಟ್‌ಗಾಗಿ scroll-margin-top ಬಳಸುವುದು
scroll-marginನ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಬಳಕೆಯು ಸ್ಥಿರ ಹೆಡರ್ ಇರುವಾಗ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಆಫ್‌ಸೆಟ್ ಮಾಡುವುದಾಗಿದೆ. ಅದನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ನಿಮ್ಮ ಸ್ಥಿರ ಹೆಡರ್‌ನ ಎತ್ತರವನ್ನು ನಿರ್ಧರಿಸಿ: ನಿಮ್ಮ ಸ್ಥಿರ ಹೆಡರ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಅದರ ಎತ್ತರವನ್ನು ನಿರ್ಧರಿಸಲು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ. ಇದೇ ಮೌಲ್ಯವನ್ನು ನೀವು
scroll-margin-topಗಾಗಿ ಬಳಸುತ್ತೀರಿ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಹೆಡರ್ 60 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಎತ್ತರವಾಗಿದ್ದರೆ, ನೀವುscroll-margin-top: 60px;ಅನ್ನು ಬಳಸುತ್ತೀರಿ. scroll-margin-topಅನ್ನು ಗುರಿ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಿ: ನೀವು ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಬಯಸುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಇವು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ ಹೆಡಿಂಗ್‌ಗಳು (<h1>,<h2>,<h3>, ಇತ್ಯಾದಿ) ಅಥವಾ ನಿಮ್ಮ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳು ಸೂಚಿಸುವ ವಿಭಾಗಗಳಾಗಿರುತ್ತವೆ.
ಉದಾಹರಣೆ: ಮೂಲಭೂತ ಅನುಷ್ಠಾನ
ನೀವು 70 ಪಿಕ್ಸೆಲ್‌ಗಳ ಎತ್ತರವಿರುವ ಸ್ಥಿರ ಹೆಡರ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ನೀವು ಬಳಸಬೇಕಾದ CSS ಇಲ್ಲಿದೆ:
h2 {
scroll-margin-top: 70px;
}
ಈ CSS ನಿಯಮವು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುವುದೇನೆಂದರೆ, ಆಂಕರ್ ಲಿಂಕ್ ಒಂದು <h2> ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಿದಾಗ, ಅದು <h2> ಎಲಿಮೆಂಟ್‌ನ ಮೇಲ್ಭಾಗ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗದ ನಡುವೆ ಕನಿಷ್ಠ 70 ಪಿಕ್ಸೆಲ್‌ಗಳ ಜಾಗ ಇರುವ ಸ್ಥಾನಕ್ಕೆ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಬೇಕು. ಇದು ಸ್ಥಿರ ಹೆಡರ್ ಹೆಡಿಂಗ್ ಅನ್ನು ಮುಚ್ಚುವುದನ್ನು ತಡೆಯುತ್ತದೆ.
ಉದಾಹರಣೆ: ಬಹು ಹೆಡಿಂಗ್ ಹಂತಗಳಿಗೆ ಅನ್ವಯಿಸುವುದು
ನಿಮ್ಮ ಪುಟದಾದ್ಯಂತ ಸ್ಥಿರವಾದ ನಡವಳಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು scroll-margin-top ಅನ್ನು ಬಹು ಹೆಡಿಂಗ್ ಹಂತಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು:
h1, h2, h3 {
scroll-margin-top: 70px;
}
ಉದಾಹರಣೆ: ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಗಳಿಗಾಗಿ ಕ್ಲಾಸ್ ಬಳಸುವುದು
ಎಲ್ಲಾ ಹೆಡಿಂಗ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುವ ಬದಲು, ನೀವು ಕೇವಲ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಗಳಿಗೆ ಮಾತ್ರ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸಬಹುದು. ಆ ವಿಭಾಗಗಳಿಗೆ ಒಂದು ಕ್ಲಾಸ್ ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು:
<section id="introduction" class="scroll-offset">
<h2>Introduction</h2>
<p>...</p>
</section>
.scroll-offset {
scroll-margin-top: 70px;
}
ಪರ್ಯಾಯವಾಗಿ scroll-padding-top ಬಳಸುವುದು
scroll-padding-top ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು ಒಂದು ಪರ್ಯಾಯ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಗುರಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಮಾರ್ಜಿನ್ ಸೇರಿಸುವ ಬದಲು, ಇದು ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
scroll-padding-top ಅನ್ನು ಬಳಸಲು, ನೀವು ಅದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ <body> ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸುತ್ತೀರಿ:
body {
scroll-padding-top: 70px;
}
ಇದು ಬ್ರೌಸರ್‌ಗೆ ಪುಟದ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಪ್ರದೇಶವು ಮೇಲ್ಭಾಗದಲ್ಲಿ 70-ಪಿಕ್ಸೆಲ್ ಪ್ಯಾಡಿಂಗ್ ಹೊಂದಿರಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ. ಆಂಕರ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ ಗುರಿ ಎಲಿಮೆಂಟ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗದಿಂದ 70 ಪಿಕ್ಸೆಲ್‌ಗಳ ಕೆಳಗಿರುವ ಸ್ಥಾನಕ್ಕೆ ಸ್ಕ್ರೋಲ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಸ್ಥಿರ ಹೆಡರ್ ಅನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.
scroll-margin ಮತ್ತು scroll-padding ನಡುವೆ ಆಯ್ಕೆ ಮಾಡುವುದು
scroll-margin ಮತ್ತು scroll-padding ನಡುವಿನ ಆಯ್ಕೆಯು ಸಾಮಾನ್ಯವಾಗಿ ವೈಯಕ್ತಿಕ ಆದ್ಯತೆ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಲೇಔಟ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ನಿರ್ಧರಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ಇಲ್ಲಿದೆ ಒಂದು ಹೋಲಿಕೆ:
scroll-margin:- ಗುರಿ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
- ವೈಯಕ್ತಿಕ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣ.
- ವಿಭಿನ್ನ ವಿಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ಆಫ್‌ಸೆಟ್‌ಗಳು ಬೇಕಾದಾಗ ಉಪಯುಕ್ತವಾಗಬಹುದು.
scroll-padding:- ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್‌ಗೆ (ಸಾಮಾನ್ಯವಾಗಿ
<body>) ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. - ಇಡೀ ಪುಟದಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಆಫ್‌ಸೆಟ್‌ಗಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸರಳ.
- ವಿಭಿನ್ನ ವಿಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ಆಫ್‌ಸೆಟ್‌ಗಳು ಬೇಕಾದಾಗ ಸೂಕ್ತವಲ್ಲದಿರಬಹುದು.
- ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್‌ಗೆ (ಸಾಮಾನ್ಯವಾಗಿ
ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಹೆಡಿಂಗ್‌ಗಳು ಅಥವಾ ವಿಭಾಗಗಳ ಮೇಲೆ scroll-margin ಅನ್ನು ಬಳಸುವುದು ಆದ್ಯತೆಯ ವಿಧಾನವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಸ್ಥಿರ ಹೆಡರ್‌ನೊಂದಿಗೆ ಸರಳ ಲೇಔಟ್ ಹೊಂದಿದ್ದರೆ ಮತ್ತು ತ್ವರಿತ ಪರಿಹಾರವನ್ನು ಬಯಸಿದರೆ, scroll-padding ಒಂದು ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿರಬಹುದು.
ಮುಂದುವರಿದ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು
ನಿರ್ವಹಣೆಗಾಗಿ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು
ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸಲು, ನಿಮ್ಮ ಸ್ಥಿರ ಹೆಡರ್‌ನ ಎತ್ತರವನ್ನು ಸಂಗ್ರಹಿಸಲು ನೀವು CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಹೆಡರ್ ಎತ್ತರ ಬದಲಾದಲ್ಲಿ ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ನವೀಕರಿಸಲು ಇದು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
:root {
--header-height: 70px;
}
h1, h2, h3 {
scroll-margin-top: var(--header-height);
}
/* Example of usage with scroll-padding-top */
body {
scroll-padding-top: var(--header-height);
}
ಡೈನಾಮಿಕ್ ಹೆಡರ್ ಎತ್ತರಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಸ್ಥಿರ ಹೆಡರ್‌ನ ಎತ್ತರವು ಡೈನಾಮಿಕ್ ಆಗಿ ಬದಲಾಗಬಹುದು, ಉದಾಹರಣೆಗೆ, ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಅಥವಾ ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, scroll-margin-top ಅಥವಾ scroll-padding-top ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನವೀಕರಿಸಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಬೇಕಾಗುತ್ತದೆ.
ಇದನ್ನು ಹೇಗೆ ಮಾಡುವುದು ಎಂಬುದಕ್ಕೆ ಇಲ್ಲಿದೆ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ:
function updateScrollMargin() {
const headerHeight = document.querySelector('header').offsetHeight;
document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
}
// Call the function on page load and when the window is resized
window.addEventListener('load', updateScrollMargin);
window.addEventListener('resize', updateScrollMargin);
ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ <header> ಎಲಿಮೆಂಟ್‌ನ ಎತ್ತರವನ್ನು ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ --header-height CSS ವೇರಿಯಬಲ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ನಂತರ CSS ಈ ವೇರಿಯಬಲ್ ಅನ್ನು scroll-margin-top ಅಥವಾ scroll-padding-top ಅನ್ನು ಹೊಂದಿಸಲು ಬಳಸುತ್ತದೆ.
ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು
scroll-margin ಮತ್ತು scroll-padding ಪ್ರಾಥಮಿಕವಾಗಿ ದೃಶ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆಯಾದರೂ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ಅತ್ಯಗತ್ಯ. ನೀವು ಸೇರಿಸುತ್ತಿರುವ ಆಫ್‌ಸೆಟ್ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಅಥವಾ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಬಳಕೆದಾರರ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಬಳಕೆದಾರರು ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಸಂವಹನ ನಡೆಸಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಕೇವಲ ಕೀಬೋರ್ಡ್ ಬಳಸಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ.
- ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು: ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಸರಿಯಾದ ವಿಷಯವನ್ನು ಪ್ರಕಟಿಸುತ್ತವೆಯೇ ಮತ್ತು ಆಂಕರ್ ಲಿಂಕ್ ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಫೋಕಸ್ ಉದ್ದೇಶಿತ ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಇರಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, scroll-margin ಮತ್ತು scroll-padding ಗಳ ಡೀಫಾಲ್ಟ್ ನಡವಳಿಕೆಯು ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಯಾವುದೇ ಅನಿರೀಕ್ಷಿತ ಸಮಸ್ಯೆಗಳಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ.
ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
scroll-margin ಮತ್ತು scroll-padding ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಹೊಂದಿವೆ. ಅವು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಎಡ್ಜ್, ಮತ್ತು ಒಪೇರಾ ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿವೆ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸದಿರಬಹುದು, ಆದರೆ ಅವು ಗ್ರೇಸ್‌ಫುಲ್ ಆಗಿ ಡಿಗ್ರೇಡ್ ಆಗುತ್ತವೆ, ಅಂದರೆ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳು ಇನ್ನೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಆಫ್‌ಸೆಟ್ ಅನ್ವಯವಾಗುವುದಿಲ್ಲ.
ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನೀವು ಪಾಲಿಫಿಲ್ ಅಥವಾ CSS ವರ್ಕ್‌ಅರೌಂಡ್ ಅನ್ನು ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಹಾಗೆ ಮಾಡುವುದು ಅನಿವಾರ್ಯವಲ್ಲ, ಏಕೆಂದರೆ ಬಹುಪಾಲು ಬಳಕೆದಾರರು ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದಾರೆ.
ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳ ನಿವಾರಣೆ
scroll-margin ಮತ್ತು scroll-padding ಬಳಸುವಾಗ ನೀವು ಎದುರಿಸಬಹುದಾದ ಕೆಲವು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಅವುಗಳ ನಿವಾರಣೆಯ ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:
- ಆಫ್‌ಸೆಟ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿಲ್ಲ:
- ನೀವು
scroll-margin-topಅಥವಾscroll-padding-topಅನ್ನು ಸರಿಯಾದ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಿದ್ದೀರಾ ಎಂದು ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ. - ನಿಮ್ಮ ಸ್ಥಿರ ಹೆಡರ್‌ನ ಎತ್ತರವು ನಿಖರವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
- ಯಾವುದೇ ಸಂಘರ್ಷದ CSS ನಿಯಮಗಳಿವೆಯೇ ಎಂದು ನೋಡಲು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
- ನೀವು
- ಆಫ್‌ಸೆಟ್ ತುಂಬಾ ದೊಡ್ಡದಾಗಿದೆ ಅಥವಾ ತುಂಬಾ ಚಿಕ್ಕದಾಗಿದೆ:
- ನೀವು ಬಯಸಿದ ಆಫ್‌ಸೆಟ್ ಸಾಧಿಸುವವರೆಗೆ
scroll-margin-topಅಥವಾscroll-padding-topನ ಮೌಲ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಿ. - ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ಸುಲಭವಾಗುವಂತೆ CSS ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
- ನೀವು ಬಯಸಿದ ಆಫ್‌ಸೆಟ್ ಸಾಧಿಸುವವರೆಗೆ
- ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಆಫ್‌ಸೆಟ್ ಭಿನ್ನವಾಗಿದೆ:
- ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ
scroll-margin-topಅಥವಾscroll-padding-topನ ಮೌಲ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. - ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಹೆಡರ್ ಎತ್ತರ ಬದಲಾದರೆ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ನವೀಕರಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
- ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ
ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು
scroll-margin ಮತ್ತು scroll-padding ಗಳನ್ನು ಜನಪ್ರಿಯ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಎಂಬುದರ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ:
- ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು: MDN ವೆಬ್ ಡಾಕ್ಸ್ ಮತ್ತು Vue.js ಡಾಕ್ಯುಮೆಂಟೇಶನ್‌ನಂತಹ ಅನೇಕ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು, ಆಂಕರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಆಫ್‌ಸೆಟ್ ಮಾಡಲು ಮತ್ತು ಹೆಡಿಂಗ್‌ಗಳು ಸ್ಥಿರ ಹೆಡರ್‌ನಿಂದ ಮುಚ್ಚಲ್ಪಡುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು
scroll-marginಅನ್ನು ಬಳಸುತ್ತವೆ. - ಬ್ಲಾಗ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು: ಬ್ಲಾಗ್ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಿರ ಹೆಡರ್‌ನೊಂದಿಗೆ ದೀರ್ಘ ಲೇಖನಗಳನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು
scroll-marginಅನ್ನು ಬಳಸುತ್ತವೆ. - ಒಂದು-ಪುಟದ ವೆಬ್‌ಸೈಟ್‌ಗಳು: ಒಂದು-ಪುಟದ ವೆಬ್‌ಸೈಟ್‌ಗಳು ವಿಭಿನ್ನ ವಿಭಾಗಗಳ ನಡುವೆ ಸುಗಮ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸಲು ಆಗಾಗ್ಗೆ
scroll-paddingಅನ್ನು ಬಳಸುತ್ತವೆ.
ಈ ಉದಾಹರಣೆಗಳು scroll-margin ಮತ್ತು scroll-padding ನ ಬಹುಮುಖತೆಯನ್ನು ಮತ್ತು ವಿವಿಧ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಬೆಂಗಳೂರಿನಲ್ಲಿರುವ ಒಂದು ಸಾಫ್ಟ್‌ವೇರ್ ಕಂಪನಿಯು ನೂರಾರು ಪುಟಗಳ ಆನ್‌ಲೈನ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಪೋರ್ಟಲ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು ಪರಿಗಣಿಸಿ; ಪ್ರತಿ ಹೆಡಿಂಗ್‌ನಲ್ಲಿ `scroll-margin` ಅನ್ನು ಬಳಸುವುದು ಬಳಕೆದಾರರ ಸಾಧನ ಅಥವಾ ಬ್ರೌಸರ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ಥಿರವಾಗಿ ಸುಗಮ ಅನುಭವವನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
ತೀರ್ಮಾನ
scroll-margin ಮತ್ತು scroll-padding ಸ್ಥಿರ ಹೆಡರ್‌ಗಳಿರುವ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಸುಗಮ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ನ್ಯಾವಿಗೇಷನ್ ಅನುಭವವನ್ನು ರಚಿಸಲು ಅತ್ಯಗತ್ಯ CSS ಪ್ರಾಪರ್ಟಿಗಳಾಗಿವೆ. ಈ ಪ್ರಾಪರ್ಟಿಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ಬಳಕೆದಾರರು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಅವರು ಹುಡುಕುತ್ತಿರುವ ವಿಷಯವನ್ನು ನಿರಾಶೆಯಿಲ್ಲದೆ ಕಂಡುಕೊಳ್ಳಬಹುದು ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಒಂದು ಸರಳ ಬ್ಲಾಗ್‌ನಿಂದ ಹಿಡಿದು ಸಾವೊ ಪಾಲೊ ಮತ್ತು ಸಿಂಗಾಪುರದಂತಹ ವೈವಿಧ್ಯಮಯ ಮಾರುಕಟ್ಟೆಗಳಲ್ಲಿನ ಗ್ರಾಹಕರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡಿರುವ ಸಂಕೀರ್ಣ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ವರೆಗೆ, `scroll-margin` ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಸ್ಥಿರವಾಗಿ ಆಹ್ಲಾದಕರ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ, ಆ ಮೂಲಕ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಉಪಯುಕ್ತತೆ ಮತ್ತು ಒಟ್ಟಾರೆ ಯಶಸ್ಸನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ಇಂದು ನಿಮ್ಮ ವೆಬ್ ಯೋಜನೆಗಳ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಉನ್ನತೀಕರಿಸಿ!